@import "styles/common";
@import "styles/colors";

tab-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: hidden;

    .drag-drop-container {
        @extend %hide-scrollbar;
        flex-wrap: nowrap;
        display: flex;
        align-items: center;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .view-tab {
        height: 2rem;
        display: flex;
        align-items: center;
        white-space: nowrap;
        font-size: 0.925rem;
        cursor: default;
        background: var(--tab-background);

        &:not(.new-tab) {
            border-top: 1px solid transparent;
        }

        .view-tab-content {
            display: flex;
            align-items: center;
            height: 100%;
            padding-left: 0.7rem;
            padding-right: 0.4rem;
            user-select: none;
        }

        .script-status {
            margin-left: 0.45rem;
            display: flex;
            align-items: center;
        }

        .database-icon.is-production {
            @extend %text-orange;
        }

        .view-tab-addon {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 18px;
            width: 15px;
            margin-right: 3px;

            .dirty-flag {
                display: none;
            }

            &.is-dirty:not(:hover) {
                .view-tab-close-button {
                    display: none;
                }

                .dirty-flag {
                    display: block;
                }
            }
        }

        .script-running-indicator,
        .script-stopping-indicator {
            height: 1.5rem;
            width: 1.5rem;
        }

        .script-running-indicator svg {
            stroke: orange;
            stroke-width: 2
        }

        .script-stopping-indicator svg {
            stroke: red;
            stroke-width: 2
        }

        &:hover {
            background: var(--tab-active-background);
        }

        &.active {
            background: var(--tab-active-background);
            font-weight: bold;

            .script-name {
                color: dodgerblue;
            }
        }

        &.new-tab {
            margin-left: 1px;
            padding-left: 0.45rem;
            padding-right: 0.25rem;
            background-color: transparent;
        }
    }
}

.minimal {
    .view-tab {
        background: var(--tab-background);
        font-weight: normal !important;

        .script-name {
            color: var(--tab-inactive-text-color);
            display: flex;
            align-items: center;
        }

        &.active {
            background: var(--tab-active-background);

            .script-name {
                color: var(--tab-active-text-color);
            }
        }

        &.status-Running {
            border-top-color: orange !important;
        }

        &.status-Stopping {
            border-top-color: salmon !important;
        }

        &.new-tab {
            background-color: transparent;
        }
    }

    .viewer-host.active {
        .view-tab.active {
            border-top-color: var(--active-color);
        }
    }
}

.comfy {
    tabs-bar {
        .actions {
            font-size: 1.2rem;
        }
    }

    .view-tab {
        height: 2.5rem !important;
        font-size: 1rem !important;

        .view-tab-content {
            padding-left: 0.95rem !important;
        }

        .view-tab-addon {
            margin-right: 8px !important;
        }
    }
}
